<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="../static/css/amazeui.min.css" />
    <link rel="stylesheet" href="../static/css/admin.css" />
</head>

<body>
    <div id="table">
        <router-view>
            <div class="admin-content-body">
                <div class="am-cf am-padding am-padding-bottom-0">
                    <div class="am-fl am-cf"><strong class="am-text-primary am-text-lg">用户列表</strong><small></small>
                    </div>
                </div>

                <hr>

                <div class="am-g">
                    <div class="am-u-sm-12 am-u-md-6">
                        <div class="am-btn-toolbar">

                            

                        </div>
                    </div>
                    <div class="am-u-sm-12 am-u-md-3">

                    </div>
                    <div class="am-u-sm-12 am-u-md-3">
                        <div class="am-input-group am-input-group-sm">
                            <input type="text" v-model="account" class="am-form-field" placeholder="请输入用户账号">
                            <span class="am-input-group-btn">
                                <button class="am-btn am-btn-default" type="button" @click="all">搜索</button>
                            </span>
                        </div>
                    </div>
                </div>
                <div class="am-g">
                    <div class="am-u-sm-12">

                        <template>

                            <el-table :data="news" style="width: 100%" @selection-change="choice">
                                <el-table-column type="selection" width="50">
                                </el-table-column>
                                <el-table-column type="index" label="序号" width="50">
                                </el-table-column>
                                <el-table-column prop="account" label="账号" width="100">
                                </el-table-column>
                                <el-table-column prop="password" label="密码" width="270">
                                </el-table-column>
                                <el-table-column prop="name" label="昵称" width="170">
                                </el-table-column>
                                <el-table-column prop="email" label="邮箱" width="180">
                                </el-table-column>
                                <el-table-column prop="sex" label="性别" width="100">
                                    <template slot-scope="scope">
                                        <span v-if="scope.row.sex === 1">男</span>
                                        <span  v-else-if="scope.row.sex === 0">女</span>
                                    </template>
                                </el-table-column>
                                
                                <el-table-column prop="userState" label="状态" width="100">
                                    <template slot-scope="scope">
                                        <span v-if="scope.row.userState === 1">启用</span>
                                        <span  v-else-if="scope.row.userState === 0">禁用</span>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="role" label="身份" width="130">
                                    <template slot-scope="scope">
                                        <span v-if="scope.row.role === 1">一般用户</span>
                                        <span  v-else-if="scope.row.role === 0">管理员</span>
                                    </template>
                                </el-table-column>
                                <el-table-column lable="操作" width="180">
                                    <template slot-scope="scope">
                                        <el-button @click="forbidden(scope.row)" type="danger">禁用</el-button>
                                        <el-button @click="enable(scope.row)" type="danger">启用</el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </template>

                        <!-- 分页组件 -->
                        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                            :current-page="currentPage" :page-sizes="[1, 5, 10, 15, 20]" :page-size="5"
                            layout="total, sizes, prev, pager, next, jumper" :total="totalCount">
                        </el-pagination>


                        <hr>

                    </div>
                </div>
            </div>
        </router-view>
    </div>


    <!-- 官网提供的 axios 在线地址 -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <!-- 开发环境版本 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script type="text/javascript" src="../static/js/jquery-1.11.3.min.js"></script>
    <script type="text/javascript" src="../static/myplugs/js/plugs.js"></script>
    <script src="../static/element-ui/lib/index.js"></script>
    <link rel="stylesheet" href="../static/element-ui/lib/theme-chalk/index.css" charset="utf-8">

</body>

</html>